<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    :loading="loading"
    @close="closeDialog"
  >
    <el-descriptions class="margin-top" :column="2" :size="size" border>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="项目信息">
        <div class="cell-item-width">{{ detailInfo.name }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="项目编号">
        <div class="cell-item-width">{{ detailInfo.prjNum }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="项目地址">
        <div class="cell-item-width">{{ detailInfo.address }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="工程进度">
        <div class="cell-item-width">{{ detailInfo.prjStatusName }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="行业主管部门">
        <div class="cell-item-width">{{ detailInfo.industryTypeName }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="行业主管部门编号">
        <div class="cell-item-width">{{ detailInfo.industryPrjNum }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="是否有施工许可证">
        <div class="cell-item-width">{{ detailInfo.isBuilderLicence ? "是" : "否" }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="施工许可证编号">
        <div class="cell-item-width">{{ detailInfo.builderLicencesNum }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="施工许可证发证日期">
        <div class="cell-item-width">{{ detailInfo.builderLicencesIssueDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="施工许可证有效期限">
        <div class="cell-item-width">{{ detailInfo.builderLicencesTerm }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="项目种类">
        <div class="cell-item-width">{{ detailInfo.prjType }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="中标合同价格(工程造价)">
        <div class="cell-item-width">{{ detailInfo.contractAmount }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="合同开工日期">
        <div class="cell-item-width">{{ detailInfo.contractStartDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="实际开工日期">
        <div class="cell-item-width">{{ detailInfo.startDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="项目竣工日期">
        <div class="cell-item-width">{{ detailInfo.endDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="是否树立维权告示牌">
        <div class="cell-item-width">{{ detailInfo.hasSafeguardingBoard ? "是" : "否" }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="是否有工程款支付担保">
        <div class="cell-item-width">{{ detailInfo.hasEarnestMoney ? "是" : "否" }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="担保单位名称">
        <div class="cell-item-width">{{ detailInfo.earnestUnitName }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="担保单位统一社会信用代码">
        <div class="cell-item-width">{{ detailInfo.earnestUnitCode }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="担保金额">
        <div class="cell-item-width">{{ detailInfo.earnestMoney }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="担保开始日期">
        <div class="cell-item-width">{{ detailInfo.earnestStartDate }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="担保终止日期">
        <div class="cell-item-width">{{ detailInfo.earnestEndDate }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { GetProjectInfo } from "@/api/project/projectInfo/index";
import { useScreen } from "@/store/modules/screen";

//声明变量
const size = ref("");
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(12);
const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "新增",
      footBtn: "确认新增",
      id: 0,
    }),
  },
});
const detailInfo = ref({});
const { dialogDetail } = toRefs(props);
const emit = defineEmits(["sendClose"]);
const loading = ref(false);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 24;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 12;
  }
}
const initForm = async function () {
  let tempFormData;
  if (dialogDetail.value.id) {
    loading.value = true;
    tempFormData = await GetProjectInfo(props.dialogDetail.id);
    console.log("tempFormData", tempFormData);
    tempFormData = tempFormData.data;
    Object.assign(detailInfo.value, tempFormData);
    loading.value = false;
    tempFormData = null;
  }
};
watch(
  () => dialogDetail.value.visible,
  () => {
    detailInfo.value = {};
    if (dialogDetail.value.visible) {
      initForm();
    }
  }
);

onMounted(async () => {
  initScreen();
});

/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean) {
  emit("sendClose", needRefresh);
}
</script>

<style lang="scss" scoped>
.cell-item-width {
  min-width: 150px !important;
}
.cell-item {
  //width: 120px !important;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}
:deep(.el-cascader) {
  width: 100%;
}
:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
